<template>
    <main class="copyline-container">
        <div class="copyline-title" :class="{ prefix: props.prefix }">{{ props.title }}</div>
        <div class="copyline-value red">{{ props.value }}</div>
        <div class="copyline-action">
            <Button icon="description" size="mini" type="primary" @click="onCopy(props.value)">复制</Button>
        </div>
    </main>
</template>

<script setup lang="ts">
import { Button, Icon, showNotify } from "vant";

const props = defineProps({
    title: {
        type: String,
        default: ''
    },
    value: {
        type: [String, Number],
        default: ''
    },
    prefix: {
        type: Boolean,
        default: false
    }
})

function onCopy(content: string | number) {
    navigator.clipboard.writeText(String(content)).then(() => {
        // 复制成功
        showNotify({ type: 'success', message: '复制成功' })
    }).catch(() => {
        // 复制失败
        showNotify({ type: 'danger', message: '复制失败' })
    })
}
</script>

<style lang="less" scoped>
.copyline-container {
    display: flex;
    justify-content: space-between;
    align-items: center;

    >.copyline-title::after {
        content: ':';
    }
}
</style>